<template>
  <!-- 戴镜史 -->
    <el-form inline :model="dataForm" :rules="dataRule">
      <el-row class="bg-row">
        <el-form-item label="验光号">
          <el-input  v-model="checkData.checkNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="验光师">
          <el-input  v-model="checkData.checker" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input  v-model="checkData.checkDate" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="卡号" v-if="customerData.cardNum">
          <el-input v-model="customerData.cardNum" @keyup.enter.native="getCustomerByCardNo()"></el-input>
        </el-form-item>
        <el-form-item label="卡号" v-else>
          <el-input v-model="customerData.uniqueCode"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search"  @click="openDialog('customer')">查询</el-button>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="width-125"  v-model="customerData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input class="width-125" v-if="customerData.gender == 0" value="男" readonly></el-input>
          <el-input class="width-125" v-if="customerData.gender == 1" value="女" readonly></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input class="width-125"  v-model="customerData.birthDay" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="width-125"  v-model="customerData.telPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-collection" @click="openDialog('customerDetail')">详情</el-button>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">既往戴镜史</el-divider>
      <el-row class="bg-row">
          <el-form-item label="原配镜类型">
            <el-select v-model="dataForm.glassesType">
              <el-option v-for="item in glassesTypeOption" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="镜片材质">
          <el-select v-model="dataForm.glassesM">
            <el-option v-for="item in bizData.glassmaterialsData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镜片类型">
          <el-select v-model="dataForm.glassesKind">
            <el-option v-for="item in bizData.glassesKind" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镜片颜色">
          <el-select v-model="dataForm.glassesColor">
            <el-option v-for="item in bizData.glassColor" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="戴镜年限">
          <el-input class="width-125" v-model="dataForm.glassesAge">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="隐形材质">
          <el-select v-model="dataForm.contactLensm">
            <el-option v-for="item in bizData.contactLensm" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐形产品">
          <el-select v-model="dataForm.contactLensBrand">
            <el-option v-for="item in bizData.contactLensBrand" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镜片颜色">
          <el-select v-model="dataForm.contactLensColor">
            <el-option v-for="item in bizData.contactLensColor" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="戴镜年限">
          <el-input class="width-125" v-model="dataForm.contactLensAge">
            <template slot="append">年</template>
          </el-input>
        </el-form-item>
      </el-row>
			<el-row class="bg-row">
				<el-form-item label="疾病史" class="miui-textarea" style="width: 100%;">
					<el-input  v-model="dataForm.diseaseHistory" ></el-input>
				</el-form-item>
			</el-row>
      <el-row class="bg-row">
      	<el-form-item label="过敏史" class="miui-textarea" style="width: 100%;">
      		<el-input v-model="dataForm.allergyHistory" ></el-input>
      	</el-form-item>
      </el-row>
      <el-row class="bg-row">
      	<el-form-item label="手术史" class="miui-textarea" style="width: 100%;">
      		<el-input  v-model="dataForm.operationHistory"></el-input>
      	</el-form-item>
      </el-row>
      <el-row class="bg-row">
      	<el-form-item label="家族史" class="miui-textarea" style="width: 100%;">
      		<el-input  v-model="dataForm.familyHistory"s></el-input>
      	</el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="其他病史" class="miui-textarea" style="width: 100%;">
          <el-input  v-model="dataForm.otherHistory"></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
				<el-col :span="6">
					<el-form-item label="父亲近视史">
						<el-select v-model="dataForm.fatherHistory">
							<el-option v-for="myopiaItem in bizData.myopiaHistory" :value="myopiaItem.value" :label="myopiaItem.label" :key="myopiaItem.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
      	<el-col :span="18">
					<el-form-item label="父亲近视史描述" class="miui-textarea" style="width: 100%;">
					  <el-input v-model="dataForm.fatherHistoryDesc" :disabled="!dataForm.fatherHistory || dataForm.fatherHistory == '1'"></el-input>
					</el-form-item>
				</el-col>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="6">
          <el-form-item label="母亲近视史">
            <el-select v-model="dataForm.motherHistory">
              <el-option v-for="myopiaItem in bizData.myopiaHistory" :value="myopiaItem.value" :label="myopiaItem.label" :key="myopiaItem.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      	<el-col :span="18">
          <el-form-item label="母亲近视史描述" class="miui-textarea" style="width: 100%;">
            <el-input v-model="dataForm.motherHistoryDesc" :disabled="!dataForm.motherHistory || dataForm.motherHistory == '1'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">旧镜信息</el-divider>
      <table class="miui-table">
        <tr>
          <td width="50px"></td>
          <td>球镜</td>
          <td>柱镜</td>
          <td>轴向</td>
          <td>曲率</td>
          <td>直径</td>
          <td>三棱镜</td>
          <td>Add</td>
          <td>基底</td>
          <td>瞳距(mm)</td>
          <td>VA</td>
        </tr>
        <tr>
          <td>OD</td>
          <td>
            <el-form-item prop="ballOd">
              <el-input v-model="dataForm.ballOd"></el-input>
            </el-form-item>

          </td>
          <td>
            <el-form-item prop="postOd">
              <el-input v-model="dataForm.postOd"></el-input>
            </el-form-item>

          </td>
          <td>
            <el-form-item prop="axesOd">
              <el-input v-model="dataForm.axesOd"></el-input>
            </el-form-item>

          </td>
          <td><el-input v-model="dataForm.diameterOd"></el-input></td>
          <td><el-input v-model="dataForm.camberOd"></el-input></td>
          <td><el-input v-model="dataForm.arriseOd"></el-input></td>
          <td><el-input v-model="dataForm.addOd"></el-input></td>
          <td><el-input v-model="dataForm.basisOd"></el-input></td>
          <td><el-input v-model="dataForm.interHighOd"></el-input></td>
          <td><el-input v-model="dataForm.vaOd"></el-input></td>

        </tr>
        <tr>
          <td>OS</td>
          <td>
            <el-form-item prop="ballOs">
              <el-input v-model="dataForm.ballOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="postOs">
              <el-input v-model="dataForm.postOs"></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item prop="axesOs">
              <el-input v-model="dataForm.axesOs"></el-input>
            </el-form-item>
          </td>
          <td><el-input v-model="dataForm.diameterOs"></el-input></td>
          <td><el-input v-model="dataForm.camberOs"></el-input></td>
          <td><el-input v-model="dataForm.arriseOs"></el-input></td>
          <td><el-input v-model="dataForm.addOs"></el-input></td>
          <td><el-input v-model="dataForm.basisOs"></el-input></td>
          <td><el-input v-model="dataForm.interHighOs"></el-input></td>
          <td><el-input v-model="dataForm.vaOs"></el-input></td>

        </tr>
      </table>
      <div style="position: fixed;bottom: 0;left: 0;right: 0;height: 45px;background-color: #d2d9db;display: flex;align-items: center;justify-content: flex-end;padding: 0 40px;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </div>
      <!-- <el-row style="margin: 15px auto;text-align: center;">
        <el-button type="primary" @click="refractiveFormSubmit" v-prevent-re-click>保 存</el-button>
      </el-row> -->
      <!-- 弹窗，查询顾客 -->
      <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="getCustomerData"></search-customer>
      <!-- 弹窗，顾客详情 -->
      <detail-customer v-if="detailCustomerVisible" ref="detailCustomer"></detail-customer>
    </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import * as check from '@/util/check/check'
  import { saveHistoryGlass, getHistoryGlassByPerson } from '@/api/admin/optometry/optometry'

  import SearchCustomer from '@/components/business/customer-search' // 查询顾客
  import DetailCustomer from '@/views/eims/customer/detail' // 顾客详情
  export default {
    data() {
      return {
        visible: false,
        activeName: 'first',
        searchCustomerVisible: false,
        detailCustomerVisible: false,
        dataForm:{
            checkDate:'',
            checker:''
        },
        checkData: {
          checkNumber: '',
          checker: '',
          checkDate: ''
        },
        chkDatas:[],
        customerData: {
            customerCard: '',
            id: '',
            name: '',
            gender: '',
            birthDay: '',
            telPhone: '',
            cardType: '',
            integral: ''
        },
        checkList: [],
        optType: '',
        optOptions: [
          { value: '1', label: '远用' },
          { value: '2', label: '近用' },
          { value: '3', label: '渐进/双光' },
          { value: '4', label: '隐形' },
          { value: '5', label: '中用' },
          { value: '6', label: '角膜塑形' },
          { value: '7', label: '视觉训练' },
        ],
        glassesType: '',
        glassesTypeOption: [
          {value: '1', label: '无'},
          {value: '2', label: '框架'},
          {value: '3', label: '隐形眼镜'},
        ],
        dataRule: {
          ballOd:[
            { required: false, trigger: 'blur' },
            { validator: check.checkBallGlass, trigger: 'blur' },
          ],
          ballOs:[
            { required: false, trigger: 'blur' },
            { validator: check.checkBallGlass, trigger: 'blur' },
          ],
          postOd: [
            { required: false, trigger: 'blur' },
            { validator: check.checkPostGlass, trigger: 'blur' },
          ],
          postOs: [
            { required: false, trigger: 'blur' },
            { validator: check.checkPostGlass, trigger: 'blur' },
          ],
          axesOd: [
            { required: false, trigger: 'blur' },
            { validator: check.checkAxes, trigger: 'blur' }
          ],
          axesOs: [
            { required: false, trigger: 'blur' },
            { validator: check.checkAxes, trigger: 'blur' }
          ],
          ballOda:[
            { required: false, trigger: 'blur' },
            { validator: check.checkBallGlass, trigger: 'blur' },
          ],
          ballOsa:[
            { required: false, trigger: 'blur' },
            { validator: check.checkBallGlass, trigger: 'blur' },
          ],
          postOda: [
            { required: false, trigger: 'blur' },
            { validator: check.checkPostGlass, trigger: 'blur' },
          ],
          postOsa: [
            { required: false, trigger: 'blur' },
            { validator: check.checkPostGlass, trigger: 'blur' },
          ],
          axesOda: [
            { required: false, trigger: 'blur' },
            { validator: check.checkAxes, trigger: 'blur' }
          ],
          axesOsa: [
            { required: false, trigger: 'blur' },
            { validator: check.checkAxes, trigger: 'blur' }
          ],
        }
      }
    },
    components: {
      SearchCustomer,
      DetailCustomer
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
				this.customerData = data.customer
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.$nextTick(() => {
            getHistoryGlassByPerson(this.customerData.id).then(result => {
            this.dataForm = result.data.data || {glassesType: '1'}
          })
        })
      },
      //  打开弹窗
      openDialog(name) {
        switch (name) {
          case 'customer':
            this.searchCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.searchCustomer.init()
            })
            break;
          case 'customerDetail':
            this.detailCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.detailCustomer.init(this.customerData.id, '会员详细')
            })
            break;
        }
      },
      //  获取客户信息
      getCustomerData(data) {
        this.customerData = data
      },
      refractiveFormSubmit() {
        let params1 = { customerId: this.customerData.id}
        let params2 = { ...this.dataForm }
        let data = Object.assign(filterParams(params2), params1)
        saveHistoryGlass(data).then(result => {
          if(result.data.data){
            this.$message.success('保存成功')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
  }
</style>
